{% block sw_cms_element_cross_selling %}
<div class="sw-cms-el-cross-selling">
    {% block sw_cms_element_cross_selling_title %}
    <h2 class="sw-cms-el-cross-selling__title">
        {{ placeholder(crossSelling, 'name', crossSelling.name) }}
    </h2>
    {% endblock %}

    {% block sw_cms_element_cross_selling_content %}
    <div class="sw-cms-el-cross-selling__content">
        {% block sw_cms_element_cross_selling_arrow_left %}
        <div class="sw-cms-el-cross-selling__navigation">
            <mt-icon
                class="sw-cms-el-cross-selling__navigation-button"
                name="regular-chevron-left"
                size="24"
            />
        </div>
        {% endblock %}

        {% block sw_cms_element_cross_selling_product_holder %}
        <div
            ref="productHolder"
            class="sw-cms-el-cross-selling__product-holder"
            :style="sliderBoxMinWidth"
        >
            <template v-if="!element.data.product || !element.data.product.crossSellings.length">
                {% block sw_cms_element_cross_selling_demo_data %}
                <sw-cms-el-product-box
                    v-for="index in sliderBoxLimit"
                    :key="index"
                    :element="demoProductElement"
                />
                {% endblock %}
            </template>

            <template v-else>
                {% block sw_cms_element_cross_selling_products %}
                <template
                    v-for="(crossSelling, index) in crossSellingProducts"
                    :key="index"
                >
                    <sw-cms-el-product-box
                        v-if="index < sliderBoxLimit"
                        :element="getProductEl(crossSelling.product)"
                    />
                </template>
                {% endblock %}
            </template>
        </div>
        {% endblock %}

        {% block sw_cms_element_cross_selling_arrow_right %}
        <div class="sw-cms-el-cross-selling__navigation">
            <mt-icon
                class="sw-cms-el-cross-selling__navigation-button"
                name="regular-chevron-right"
                size="24"
            />
        </div>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
